<template>
  <div id="light">
    <div class="axis">
      <div class="pies pie1" :style="{ backgroundColor: data.value === 1 ? '#FF8C00' : '#696969' }">
        <span v-show="data.value === 1">反弹</span>
      </div>
      <div class="pies pie2" :style="{ backgroundColor: data.value === 2 ? '#DC143C' : '#696969' }">
        <span v-show="data.value === 2">多头</span>
      </div>
      <div class="pies pie3" :style="{ backgroundColor: data.value === 3 ? '#7CFC00' : '#696969' }">
        <span v-show="data.value === 3">空头</span>
      </div>
      <div class="pies pie4" :style="{ backgroundColor: data.value === 4 ? '#FF8C00' : '#696969' }">
        <span v-show="data.value === 4">回调</span>
      </div>
    </div>
    <div class="text" @click="$emit('confirm')">{{ data.title }}</div>
    <color-text :value="data.change">
      {{ data.price }}
    </color-text>
    <color-text :value="data.change">
      {{ data.change.toFixed(2) }}%
    </color-text>
  </div>
</template>
<script>
export default {
  components: {
    ColorText: () => import('@/components/ColorText.vue')
  },
  props: {
    data: {
      type: Object,
      default: () => ({
        title: '贵州茅台',
        sector: 'stock',
        exchange: 'sh',
        symbol: '600519',
        change: 0,
        price: 0,
        value: 1
      })
    }
  }
}
</script>
<style scoped>
#light {
  text-align: center;
  line-height: 24px;
}

.axis {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  box-shadow: 0 0 5px 1px #909399;
  margin: 0 auto;
}

.pies {
  width: 49px;
  height: 49px;
  background-color: #8E8E8E;
  box-shadow: 0 0 1px 1px #2c3e50;
  float: left;
}

.pie1 {
  line-height: 70px;
  border-radius: 100% 0 0 0;
}

.pie2 {
  line-height: 70px;
  border-radius: 0 100% 0 0;
}

.pie3 {
  line-height: 30px;
  border-radius: 0 0 0 100%;
}

.pie4 {
  line-height: 30px;
  border-radius: 0 0 100% 0;
}

.text {
  margin-top: 4px;
  color: #1989fa;
  cursor: pointer;
}
</style>
